<template>
  <div>
    <el-row class="row">
      <el-button @click="back" icon="el-icon-arrow-left" type="info"></el-button>
      <el-button @click="openUploadPhotoDialog" type="primary">上传照片</el-button>
      <el-button @click="deleteClick" type="danger" :disabled="selectNum === 0">删除</el-button>
      <el-button @click="selectAllImage" :disabled="selectNum === photoList.length">全选</el-button>
      <el-button @click="unSelectImage" :disabled="selectNum === 0">取消选择</el-button>
    </el-row>
    <el-timeline v-loading.fullscreen.lock="isLoading">
      <el-timeline-item v-for="(item, num) in timePhotoList" :key="item.date" :timestamp="item.date" placement="top">
        <el-row>
          <el-card v-for="(photo, index) in item.photos" :key="photo.id" class="card" :body-style="{padding: '0px'}">
            <div @click="openImage(num, index)">
              <el-image :lazy="true" class="img" :src="photo.thumbnailUrl" prefix="cover" preview-test="描述">
              </el-image>
            </div>
            <svg-icon
              icon-class="select"
              class="select_icon"
              @click="selectImage(photo)"
              :class="{select_icon_true: photo.isSelect}"
            ></svg-icon>
          </el-card>
        </el-row>
      </el-timeline-item>
    </el-timeline>

    <el-dialog title="上传照片" :visible="uploadPhotoVisible" width="80%" :before-close="closeUploadPhotoDialog">
      <upload-photo :albumId="albumId" ref="updatePhoto"></upload-photo>
    </el-dialog>
    <preivew-photo :photoList="photoList" ref="previewPhoto"></preivew-photo>
  </div>
</template>

<script>
import * as photoApi from '../../api/photo'
import uploadPhoto from './components/uploadPhoto'
import preivewPhoto from './components/preivewPhoto'
import {messageSuccess} from '../../utils/message'
export default {
  name: 'photoList',
  data() {
    return {
      albumId: null,
      timePhotoList: [],
      photoList: [],
      uploadPhotoVisible: false,
      selectNum: 0,
      isLoading: false
    }
  },
  components: {uploadPhoto, preivewPhoto},
  created() {
    this.albumId = this.$route.query.id
    this.getPhotoList()
  },
  methods: {
    openUploadPhotoDialog() {
      this.uploadPhotoVisible = true
    },
    closeUploadPhotoDialog() {
      this.uploadPhotoVisible = false
      this.getPhotoList()
      this.$refs.updatePhoto.clearUpdateImage()
    },
    getPhotoList() {
      this.isLoading = true
      photoApi
        .getPhotos({albumId: this.albumId})
        .then(rep => {
          this.photoList = []
          let data = rep.data
          for (let photos of data) {
            for (let photo of photos.photos) {
              photo['isSelect'] = false
              this.photoList.push({
                msrc: photo.thumbnailUrl,
                src: photo.url,
                w: photo.width,
                h: photo.height,
                alt: photo.name
              })
            }
          }
          this.timePhotoList = data
        })
        .catch(err => {})
        .finally(() => {
          this.isLoading = false
        })
    },
    openImage(num, index) {
      let i = 0
      let sum = 0
      while (i !== num) {
        sum = sum + this.timePhotoList[i].photos.length
        i++
      }
      this.$refs.previewPhoto.openImage(sum + index)
    },
    selectImage(item) {
      if (item.isSelect) {
        item.isSelect = false
        this.selectNum--
      } else {
        item.isSelect = true
        this.selectNum++
      }
    },
    selectAllImage() {
      for (let photos of this.timePhotoList) {
        for (let photo of photos.photos) {
          photo['isSelect'] = true
        }
      }
      this.selectNum = this.photoList.length
    },
    unSelectImage() {
      for (let photos of this.timePhotoList) {
        for (let photo of photos.photos) {
          photo['isSelect'] = false
        }
      }
      this.selectNum = 0
    },
    deleteClick() {
      this.$confirm('确定要删除照片吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        let data = this.timePhotoList
        for (let photos of data) {
          for (let photo of photos.photos) {
            if (photo.isSelect) {
              this.deleteImage(photo.id, photo.path)
            }
          }
        }
        this.selectNum = 0
      })
    },
    deleteImage(id, key) {
      let params = {id: id, key: key}
      photoApi.deletePhoto(params).then(() => {
        messageSuccess('删除成功')
        this.getPhotoList()
      })
    },
    back() {
      this.$router.go('-1')
    }
  }
}
</script>

<style lang="scss" scoped>
.row {
  margin: 10px;
}
.card {
  display: block;
  margin: 1px;
  height: 150px;
  width: 150px;
  float: left;
  position: relative;
  cursor: pointer;
  &:hover {
    .select_icon {
      display: inline;
    }
  }
}
.select_icon {
  position: absolute;
  height: 20px;
  width: 20px;
  right: 10px;
  bottom: 10px;
  display: none;
  color: #909399;
}
.select_icon_true {
  color: #67c23a;
  display: inline;
}
.select_icon_false {
  color: #909399;
  display: inline;
}
</style>
